<template>
  <div style="height: 100%;" :id="id">
    <Portal to="right-disable"
            :disabled="!queryModelDefaultSetting.showSetting">
      <DashboardInterceptConsumer :gadgetId="id"
                                  shadow="hover"
                                  @mouseenter="mouseenter(true)"
                                  @mouseleave="mouseenter(false)"
                                  :style="{height:gadgetHeight+ 'px'}">
        <el-card shadow="hover"
                 :style="{height:gadgetHeight+ 'px'}">
          <div>
            <div class="cardHeader"
                 @mouseenter="mouseenter(true)"
                 @mouseleave="mouseenter(false)"
                 v-if="(gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0) || (gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0)">
              <span>
                <span class="cardTitle threepoints"
                      :title="gadgetSetting.headerTitle"
                      v-if='gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0'>
                  {{ gadgetSetting.headerTitle }}</span>
                <el-tooltip :open-delay="1000"
                            class="item"
                            effect="dark"
                            :content="gadgetSetting.headerDescription"
                            placement="right"
                            v-if='gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0'>
                  <i class="cuifont icon_help_circle cardIcon"></i>
                </el-tooltip>
              </span>
              <MoreMenu :slicer='slicer'
                        :gadgetId='id'
                        :gadgetType='gadgetInfo.com'
                        @updateQuery="query"
                        @fullScreen="fullScreen" />
            </div>
            <div v-if="isHasData"
                 class="content el-card__body"
                 :style="{height:gadgetHeight+ 'px',backgroundImage:'url('+gadgetSetting.backgroundImg+')'}">
              <div>
                <div class="header">
                  <div :style="{fontSize:gadgetSetting.titleFontSize,color:gadgetSetting.titleFontColor }"
                       style="margin-top: 3px;padding:5px 5px;">{{ gadgetSetting.title }}
                  </div>
                </div>
                <div class="main">
                  <div :style="{ fontSize:gadgetSetting.valueFontSize,color:gadgetSetting.valueFontColor}"
                       @click="findOriginData">{{ gadgetSetting.value }}
                  </div>
                </div>
              </div>
              <div v-if="gadgetSetting.footerTitle"
                   class="footer">
                <div style="text-align: center;"
                     :style="{ fontSize:gadgetSetting.footerTitleFontSize,color:gadgetSetting.footerTitleFontColor}">
                  {{ gadgetSetting.footerTitle }}
                </div>
              </div>
            </div>
            <div v-else
                 class="gadget-no-data">
              <el-image @click="query()"
                        :src='noDataImageUrl'
                        fit='fill'></el-image>
            </div>
          </div>
        </el-card>
      </DashboardInterceptConsumer>

    </Portal>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"
           :slicer='slicer' />
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import { defaultGadgetSettingList } from '@/utils/data-json'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model')
  },
  data: function () {
    return {
      gadgetSetting: {},
      loading: false,
      autoRefresh: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'cardlablegadget',
          gadgetSettingExclude: ['DATA'],
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'cardlablegadget' }).gadgetSetting
          // gadgetSetting: {
          //   titleFontSize: '14px',
          //   titleFontColor: '#000000',
          //   title: '',
          //   valueFontSize: '46px',
          //   valueFontColor: '#000000',
          //   value: '',
          //   footerTitleFontSize: '14px',
          //   footerTitleFontColor: '#000000',
          //   footerTitle: '',
          //   backgroundImg: 'https://oss.mspbots.ai/app/gadget/default-white.png',
          //   headerTitle: '',
          //   headerDescription: ''
          // }
        }
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr(),
        type: this.filterType
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        _self.verifyHasData(res)
        if (res.config) {
          _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  height: 32px;
  justify-content: space-around;
  text-align: center;
  background: no-repeat;
  background-size: cover;
}

.main {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 35px;
  padding: 5px 0 !important;
  height: 85px;
}

.footer {
  text-align: left;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cardHeader > span {
  display: inline-block;
  width: calc(100% - 30px);
}

.cardTitle {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  display: inline-block;
  max-width: calc(100% - 30px);
  position: relative;
  top: 2px;
}

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}
</style>
